<template>
  <view class="order-list-page">
    <!-- 顶部导航栏 -->
    <!-- <view class="header-nav">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont-v2 icon-youjiantou back-icon" style="transform: rotate(180deg);"></text>
        </view>
        <text class="page-title">我的订单</text>
        <view class="header-actions">
          <text class="iconfont-v2 icon-gengduo more-icon"></text>
        </view>
      </view>
    </view> -->

    <!-- 状态标签页 -->
    <view class="status-tabs">
      <view 
        class="tab-item" 
        v-for="(tab, index) in statusTabs" 
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text>{{ tab.name }}</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-card" v-for="(order, index) in filteredOrders" :key="index">
        <!-- 订单头部 -->
        <view class="order-header">
          <text class="order-time">{{ order.orderTime }}</text>
          <text class="order-status" :class="order.statusClass">{{ order.status }}</text>
        </view>

        <!-- 物流信息（仅待收货状态显示） -->
        <view class="tracking-info" v-if="order.status === '待收货'">
          <view class="tracking-content">
            <text class="iconfont-v2 icon-gouwuche tracking-icon"></text>
            <view class="tracking-details">
              <text class="tracking-text">{{ order.trackingInfo.location }}</text>
              <text class="tracking-time">{{ order.trackingInfo.time }}</text>
            </view>
            <text class="iconfont-v2 icon-youjiantou tracking-arrow"></text>
          </view>
        </view>

        <!-- 商品信息 -->
        <view class="product-section">
          <view class="product-item">
            <view class="product-image">
              <image :src="order.product.image" :alt="order.product.name" />
            </view>
            <view class="product-info">
              <text class="product-name">{{ order.product.name }}</text>
              <text class="product-description">{{ order.product.description }}</text>
              <view class="product-price">
                <text class="price">¥{{ order.product.price }}</text>
                <text class="quantity">x{{ order.product.quantity }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 订单总计 -->
        <view class="order-total">
          <text class="total-text">共{{ order.product.quantity }}件商品 合计：</text>
          <text class="total-price">¥{{ order.totalPrice }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="order-actions">
          <button class="action-btn secondary-btn" @click="viewOrderDetail(order)">
            <text>查看详情</text>
          </button>
          <button 
            class="action-btn primary-btn" 
            :class="order.actionClass"
            @click="handleOrderAction(order)"
          >
            <text>{{ order.actionText }}</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredOrders.length === 0">
      <text class="iconfont-v2 icon-kong empty-icon"></text>
      <text class="empty-text">暂无订单</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 状态标签页
      statusTabs: [
        { name: "全部", status: "all" },
        { name: "待付款", status: "pending_payment" },
        { name: "待发货", status: "pending_shipment" },
        { name: "待收货", status: "pending_receipt" },
        { name: "待评价", status: "pending_review" }
      ],
      
      currentTab: 0,
      
      // 订单数据
      orders: [
        {
          id: 1,
          orderTime: "2021.12.27 12:23",
          status: "待付款",
          statusClass: "status-pending",
          product: {
            name: "意大利超火的球鞋",
            description: "说明: 1kg/份",
            price: 76.6,
            quantity: 1,
            image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
          },
          totalPrice: 76.6,
          actionText: "去支付",
          actionClass: "pay-btn"
        },
        {
          id: 2,
          orderTime: "2021.12.27 12:23",
          status: "待发货",
          statusClass: "status-shipping",
          product: {
            name: "意大利超火的球鞋",
            description: "说明: 1kg/份",
            price: 38.8,
            quantity: 1,
            image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
          },
          totalPrice: 38.8,
          actionText: "提醒发货",
          actionClass: "remind-btn"
        },
        {
          id: 3,
          orderTime: "2021.12.27 12:23",
          status: "待收货",
          statusClass: "status-receiving",
          product: {
            name: "意大利超火的球鞋",
            description: "说明: 1kg/份",
            price: 45.8,
            quantity: 2,
            image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
          },
          totalPrice: 91.6,
          actionText: "确认收货",
          actionClass: "confirm-btn",
          trackingInfo: {
            location: "商品正在配送中，预计今天送达",
            time: "2021.12.27 14:30"
          }
        },
        {
          id: 4,
          orderTime: "2021.12.26 15:45",
          status: "待评价",
          statusClass: "status-review",
          product: {
            name: "意大利超火的球鞋",
            description: "说明: 1kg/份",
            price: 28.8,
            quantity: 1,
            image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
          },
          totalPrice: 28.8,
          actionText: "立即评价",
          actionClass: "review-btn"
        },
        {
          id: 5,
          orderTime: "2021.12.25 09:20",
          status: "已完成",
          statusClass: "status-completed",
          product: {
            name: "意大利超火的球鞋",
            description: "说明: 1kg/份",
            price: 55.5,
            quantity: 1,
            image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
          },
          totalPrice: 55.5,
          actionText: "再次购买",
          actionClass: "rebuy-btn"
        }
      ]
    }
  },
  computed: {
    // 根据当前标签过滤订单
    filteredOrders() {
      if (this.currentTab === 0) {
        return this.orders; // 显示全部订单
      }
      
      const statusMap = {
        1: "待付款",
        2: "待发货", 
        3: "待收货",
        4: "待评价"
      };
      
      const targetStatus = statusMap[this.currentTab];
      return this.orders.filter(order => order.status === targetStatus);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    switchTab(index) {
      this.currentTab = index;
      console.log("切换标签:", this.statusTabs[index].name);
    },
    viewOrderDetail(order) {
      console.log("查看订单详情:", order);
      uni.navigateTo({
        url: `/pages/fast/order-detail?id=${order.id}`
      });
    },
    handleOrderAction(order) {
      console.log("处理订单操作:", order.actionText, order);
      
      switch (order.actionText) {
        case "去支付":
          uni.navigateTo({
            url: '/pages/fast/payment'
          });
          break;
        case "提醒发货":
          uni.showToast({
            title: "已提醒商家发货",
            icon: 'success'
          });
          break;
        case "确认收货":
          uni.showModal({
            title: "确认收货",
            content: "确认已收到商品吗？",
            success: (res) => {
              if (res.confirm) {
                uni.showToast({
                  title: "确认收货成功",
                  icon: 'success'
                });
                // 这里可以更新订单状态
                order.status = "待评价";
                order.statusClass = "status-review";
                order.actionText = "立即评价";
                order.actionClass = "review-btn";
              }
            }
          });
          break;
        case "立即评价":
          uni.navigateTo({
            url: `/pages/fast/add-comment?orderId=${order.id}`
          });
          break;
        case "再次购买":
          uni.showToast({
            title: "已加入购物车",
            icon: 'success'
          });
          break;
        default:
          uni.showToast({
            title: order.actionText,
            icon: 'none'
          });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-list-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.header-nav {
  background: white;
  padding: 20rpx 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .back-icon {
        font-size: 32rpx;
        color: #333;
      }
    }

    .page-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .header-actions {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .more-icon {
        font-size: 32rpx;
        color: #333;
      }
    }
  }
}

.status-tabs {
  background: white;
  display: flex;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .tab-item {
    flex: 1;
    padding: 30rpx 20rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    &.active {
      color: #ED6567;
      font-weight: 600;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: #ED6567;
        border-radius: 2rpx;
      }
    }

    text {
      display: block;
    }
  }
}

.order-list {
  padding: 0 20rpx;

  .order-card {
    background: white;
    border-radius: 24rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;

      .order-time {
        font-size: 26rpx;
        color: #666;
      }

      .order-status {
        font-size: 28rpx;
        font-weight: 500;

        &.status-pending {
          color: #FF6B35;
        }

        &.status-shipping {
          color: #FFD700;
        }

        &.status-receiving {
          color: #20B2AA;
        }

        &.status-review {
          color: #9370DB;
        }

        &.status-completed {
          color: #50C878;
        }
      }
    }

    .tracking-info {
      padding: 20rpx 30rpx;
      background: #f8f9fa;
      border-bottom: 2rpx solid #f0f0f0;

      .tracking-content {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .tracking-icon {
          font-size: 32rpx;
          color: #20B2AA;
        }

        .tracking-details {
          flex: 1;

          .tracking-text {
            font-size: 26rpx;
            color: #333;
            margin-bottom: 4rpx;
            display: block;
          }

          .tracking-time {
            font-size: 24rpx;
            color: #666;
            display: block;
          }
        }

        .tracking-arrow {
          font-size: 24rpx;
          color: #ccc;
        }
      }
    }

    .product-section {
      padding: 30rpx;

      .product-item {
        display: flex;
        gap: 20rpx;

        .product-image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 16rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .product-info {
          flex: 1;

          .product-name {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
            display: block;
            line-height: 1.4;
          }

          .product-description {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 12rpx;
            display: block;
          }

          .product-price {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
              font-size: 28rpx;
              font-weight: 600;
              color: #ED6567;
            }

            .quantity {
              font-size: 24rpx;
              color: #666;
            }
          }
        }
      }
    }

    .order-total {
      padding: 0 30rpx 20rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8rpx;

      .total-text {
        font-size: 26rpx;
        color: #666;
      }

      .total-price {
        font-size: 32rpx;
        font-weight: 600;
        color: #ED6567;
      }
    }

    .order-actions {
      padding: 20rpx 30rpx 30rpx;
      display: flex;
      justify-content: flex-end;
      gap: 20rpx;

      .action-btn {
        padding: 16rpx 32rpx;
        border-radius: 40rpx;
        font-size: 26rpx;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2rpx solid transparent;

        &.secondary-btn {
          background: white;
          color: #666;
          border-color: #e0e0e0;

          &:hover {
            border-color: #ED6567;
            color: #ED6567;
          }

          text {
            color: inherit;
          }
        }

        &.primary-btn {
          background: #ED6567;
          color: white;

          &:hover {
            background: #d55a54;
          }

          &.pay-btn {
            background: #FF6B35;

            &:hover {
              background: #e55a2b;
            }
          }

          &.confirm-btn {
            background: #20B2AA;

            &:hover {
              background: #1a9a94;
            }
          }

          &.review-btn {
            background: #9370DB;

            &:hover {
              background: #7c5cb8;
            }
          }

          &.rebuy-btn {
            background: #50C878;

            &:hover {
              background: #45b06a;
            }
          }

          text {
            color: white;
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;

  .empty-icon {
    font-size: 120rpx;
    color: #ccc;
    margin-bottom: 30rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>